import { memo, useEffect, useRef } from 'react';
import { DoubleSide, GridHelper, Mesh } from 'three';

export const Plane = memo(() => {
  const mesh = useRef<Mesh>(null!);
  const grid = useRef<GridHelper>(null!);

  useEffect(() => {
    mesh.current.position.z = -0.0009;
    grid.current.rotation.x = Math.PI / 2;
  }, []);

  return (
    <mesh ref={mesh}>
      <planeGeometry args={[5000, 5000, 1, 1]} />
      <gridHelper ref={grid} args={[5000, 40, 0xffffff, 0xffffff]} />
      <meshBasicMaterial color="#ccc" side={DoubleSide} depthTest={true} />
    </mesh>
  );
});
